﻿<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>慈铭体检-疾病分布</title>
</head>
<style type="text/css">
.city_tip{display:none; position:absolute; z-index:2; padding-top:2px; padding-right:3px; background:url(img/qb.png) no-repeat right top; border:0px solid #2385B1; /*-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; */font-size:12px;color:#333;}
table{ background:#5c89b9;}
td{background:#6c99ca; padding:3px;}
</style>
<body>
	<div id="topheader">
        <div class="logocon"><span class="logo">慈铭体检</span>&nbsp;&nbsp;|&nbsp;&nbsp;疾病分布</div>
        <div class="navmenu"><a href="../index.html">网站首页</a>|<a href="../svgMap/map.html">疾病分布</a>|<a href="../yuce.html">慢病预测</a>|<a href="../aizdlogin.html">癌症筛选</a></div>
    </div>
    <div class="wrap" style="width: 100%; height: 1000px;background:url(img/map.jpg) no-repeat -168px top #a7c2df; border:0;">
		<div class="items" id="Item0" style="float: left;width:100%;">
            <a href="javascript:;" class="fold"></a>
            	<div class="select-box" style="padding: 70px 0px 0px 30px; position:absolute; left:10px; top:10px;">
            			<div class="select-name">疾病</div>
            			<div id="disease-type" class="combo-box">
            				<a class="combo-box-trigger" href="javascript: void(0);">
            					<span class="combo-box-text order-text">高血压</span>
            					<i class="drop-icon">1#</i>
            					<input type="hidden" value="gaoxueya" id="disease_pin" />
            				</a>
            				<div style="display: none;" class="combo-box-wrapper">
            					<ul class="combo-box-list">
            						<li class="combo-box-item" title="gaoxueya" data-value="1#"><a href="javascript: void(0);"><span></span>高血压</a></li>
            						<li class="combo-box-item" title="tangniaobing" data-value="2#"><a href="javascript: void(0);"><span></span>糖尿病</a></li>
            						<li class="combo-box-item" title="gaoxuezhi" data-value="3#"><a href="javascript: void(0);"><span></span>高血脂</a></li>
            					</ul>
            				</div>
            			</div>
            		</div>
            	
                <div id="ChinaMap" style="float: left; position:relative;margin-top:150px; margin-left:100px;"></div>
               
	           <!-- <pre class="brush:js">
		            $('#ChinaMap').SVGMap({
						mapName: 'china'
					});
                </pre>-->
			   <div id="moveId" style="height:100%;width:16px; position:absolute;right:32%;opacity: 0.6; color:#FFF;display:block;z-index:99;background:#5c89b9; margin-top:50px;text-align: center;line-height: 600px;"><</div>
               <div id="rightBar" style="width:32%; position:absolute; right:0; z-index:2; background: #6c99ca; height: 930px; padding-top:50px;">
			   	    <!--
					<div   class="side-toggle" href="javascript: void(0);" style="color: rgb(255, 255, 255); font-weight: bold; 
			   	                            padding-top: 10px; line-height: 60px;text-align: center; position:absolute; left: -15px; z-index:99;">
			   	    		<>
			   	    </div>
					-->
			   	    <div style="height: 50px;width: 100%; border-bottom:1px solid #5c89b9; line-height:50px;">
			   	    	<span class="activeOn" style="float: left; color: rgb(255, 255, 255); font-size: 14px; width: 30%;  text-align: center;">职业</span>
		                <span style="float: left; color: rgb(255, 255, 255); font-size: 14px; width: 30%; text-align: center;">年龄</span>
		                <span style="float: left; color: rgb(255, 255, 255); font-size: 14px; width: 30%;text-align: center;">BMI</span>
			   	    </div>
			    	<div id="selectedCity" style=" padding-top:30px;">
						 <ul>
							<li><div id="container0" style="min-width:400px;"></div></li>
						 </ul>
						 <ul class ="disInfo">
							<li><div id="container1" style="min-width:400px;"></div></li>
						 </ul>
						 <ul class ="disInfo">
							<li><div id="container2" style="min-width:400px;"></div></li>
						 </ul>
					</div>
			    </div>
                <div style="clear:both;"></div>
	     </div>
	     
         <div style="clear:both;"></div>
	 </div>     
<link rel="stylesheet" type="text/css" href="css/SyntaxHighlighter.css">
<script type="text/javascript" src="js/lib/SyntaxHighlighter.js"></script>
<script type="text/javascript" src="js/lib/jquery.js"></script>
<script type="text/javascript" src="js/lib/raphael-min.js"></script>
<script type="text/javascript" src="js/res/chinaMapConfig.js"></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/pie.js"></script>
<script type="text/javascript" src="js/histogram.js"></script>
<script type="text/javascript" src="js/histogram1.js"></script>
<script type="text/javascript" src="js/highcharts.js"></script>
<script type="text/javascript" src="js/exporting.js"></script>
<script type="text/javascript" src="http://cdn.hcharts.cn/highcharts/highcharts-more.js"></script>
 <script>
  (function($){ 
    //拖拽插件,参数:id或object 
    $.Move = function(_this){ 
        if(typeof(_this)=='object'){ 
            _this=_this; 
        }else{ 
            _this=$("#"+_this); 
        } 
        if(!_this){return false;} 
  
        _this.css({'position':'absolute'}).hover(function(){$(this).css("cursor","e-resize");},function(){$(this).css("cursor","default");}) 
        _this.mousedown(function(e){//e鼠标事件 
            var offset = $(this).offset(); 
            var x = e.pageX - offset.left; 
            var y = e.pageY - offset.top; 
            _this.css({'opacity':'0.3'}); 
            $(document).bind("mousemove",function(ev){//绑定鼠标的移动事件，因为光标在DIV元素外面也要有效果，所以要用doucment的事件，而不用DIV元素的事件 
                _this.bind('selectstart',function(){return false;}); 
                var _x = ev.pageX - x-4;//获得X轴方向移动的值 
                var _y = ev.pageY - y;//获得Y轴方向移动的值 
                _this.css({'left':_x+"px"}); 
				var width=$(window).width();
				$('#rightBar').css("width",width-ev.clientX);
            }); 
        }); 
  
        $(document).mouseup(function(){ 
            $(this).unbind("mousemove"); 
            _this.css({'opacity':''}); 
			updateChartSize();
        }) 
    }; 

})(jQuery) 
  
$.Move($('#moveId'));

function updateChartSize() {
    //动态修改容器大小
	var width= $('#rightBar').width();
	var height = $("#selectedCity").height();
	container0.setSize(width, height, true);
	container1.setSize(width, height, true);
	container2.setSize(width, height, true);
} 
  </script>
<script type="text/javascript">
$(function(){
	
	$(".combo-box-trigger").on('click',function(){
		$(".combo-box-wrapper").toggle();
	});
	/*
	$('.side-toggle').on('click',function(){
		var marginLeft = $('#rightBar').css("margin-right");
		if(marginLeft == '0px'){
			$('#rightBar').css("margin-right","-25%");
		}else{
			$('#rightBar').css("margin-right","0px");
			
		}
	});
	*/
	//span切换
	$("#rightBar div").find("span").on("click",function(){
		$(this).addClass("activeOn");
		$(this).siblings().removeClass("activeOn");
		
		var ind = $(this).index();
		var $div = $('#selectedCity').children('ul').eq(ind)
		$div.removeClass('disInfo');
		$div.siblings().addClass('disInfo');
		
		//每次点击都需要去请求后台，得到对应的数据
		//然后把数据拼接到 $selectedCity 这个对象中
	});
	/**选中*/
	$(".combo-box-list li a").on("click",function(){
		var dataValue = $(this).parent("li").attr('data-value');
		var diseasePin = $(this).parent("li").attr('title');
		var textI = $(this).text();
		$('.combo-box-trigger').find("span").text(textI);
		$('.drop-icon').text(dataValue);
		$(".combo-box-wrapper").toggle();
		$("#disease_pin").val(diseasePin);
	});
	
	var mapObj_2 = {};
	var $selectedCity = $("#selectedCity");
	$('#ChinaMap').SVGMap({
		
		mapName: 'china',
		mapWidth: 1000,
		mapHeight: 657,
		
		external: mapObj_2,
		
		stateTipHtml: function(stateData, obj){
			var valueInfo = $("#disease_pin").val();
            //return 'id:' + ((stateData)[obj.id] && (stateData)[obj.id].baifenbi || obj.id) + '<br/>name:' + obj.name+"<br/>"+obj.diseases[valueInfo];
            return "<span>"+obj.diseases[valueInfo]+"</span><br/>"+obj.name
		},
        clickCallback: function(stateData, obj){
       	//$selectedCity.empty();
		//获取疾病类型
       	var valueInfo = $("#disease_pin").val();
		//获取选择的省份名称
       	 var content = obj.name;
		//获取省份的code
		 var id = obj.id;
		 getCityDiseaseData(valueInfo,id);
       	 /*$selectedCity.append("<ul><li>"+
       	                       "<span style='color: rgb(255, 255, 255); width: 25px; height: 25px; background: none repeat scroll 0% 0% rgb(33, 98, 196); margin-left: 5px; display: inline-block; float: left; text-align: center; font-size: 17px; font-weight: bold;'>1</span>"+
       	 					   "<span style='color: rgb(255, 255, 255);padding-left: 20px; font-size: 15px;'>IT</span>"+
       	 					   "<span class='scenic-heat heat-5'></span>"+
       	  					   "</li></ul>");
		$selectedCity.append("<iframe src='zhuzhuangtu.html' frameBorder='no' height='600px' width='220px'></iframe>");*/
       },
	    hoverCallback: function(stateData, obj){
					
				//	 console.log( obj);
				}
	});
	
	function getCityDiseaseData(disease,city){
		var url=city+"_"+disease+"_data.json";
		$.ajax({
			type:"GET",
			dataType:"text",
			url:url,
			success:function(data){
				var data=eval(data);
				var occupation = data["occupation"];
				var age = data["age"];
				var bmi = data["bmi"];
				//职业
				container0.series[0].setData(occupation["series"][0]["data"]);
				//年龄
				container1.series[0].setData(age["series"][0]["data"]);
				container1.xAxis[0].setCategories(age["categories"]);
				//bmi
				for(var i=0;i<bmi["series"].length;i++){
					container2.series[i].setData(bmi["series"][i]["data"]);
				}
				container2.xAxis[0].setCategories(bmi["categories"]);
			}
		});
	}
	//北京、上海、广州、深圳、南京、济南、大连、天津、武汉、成都
	  //console.log( mapObj_2);

	var city_en = [ 'beijing','shanghai','guangdong','guangdong','jiangsu','shandong','liaoning','tianjin','hubei','sichuan','xinjiang','xizang','qinghai','gansu','yunnan','guangxi','guizhou','chongqing','shanxi','neimongol','shaanxi','ningxia','henan','hunan','jiangxi','fujian','zhejiang','anhui','hebei','jilin','heilongjiang','hainan'];
	var city_zh = [ '北京','上海','广州','深圳','南京','济南','大连','天津','武汉','成都','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;','&nbsp;'/*,'xinjiang','xizang','qinghai','gansu','yunnan','guangxi','guizhou','chongqing','shanxi','neimongol','shaanxi','ningxia','henan','hunan','jiangxi','fujian','zhejiang','anhui','hebei','jilin','heilongjiang','hainan123456'*/];
	var city_i = 0;
	for( city_i =0; city_i < 32;city_i++ ){
		
		var html_city = '<div id="cityTip_'+ city_i +'" class="city_tip">'+ city_zh[city_i] +'</div>';
		
		$("#ChinaMap").append( html_city);
		// console.log( html_city);
		 $('#cityTip_'+ city_i).css({
				left: $(mapObj_2[ city_en[city_i] ].node).offset().left +20,
				top: $(mapObj_2[ city_en[city_i] ].node).offset().top + 20 

			}).show();
	}
	
		 $('#cityTip_0').css({
				left: $(mapObj_2[ 'beijing' ].node).offset().left - 110 ,
				top: $(mapObj_2[ 'beijing' ].node).offset().top  - 140 

			}).show();
		 
		 $('#cityTip_1').css({
				left: $(mapObj_2[ 'shanghai' ].node).offset().left - 116 ,
				top: $(mapObj_2[ 'shanghai' ].node).offset().top  - 146 

			}).show();
		 
		 $('#cityTip_2').css({
				left: $(mapObj_2[ 'guangdong' ].node).offset().left -67 ,
				top: $(mapObj_2[ 'guangdong' ].node).offset().top  - 108 

			}).show();
	
	
		 $('#cityTip_3').css({
				left: $(mapObj_2[ 'guangdong' ].node).offset().left -50 ,
				top: $(mapObj_2[ 'guangdong' ].node).offset().top  - 110 

			}).show();
		 
		 $('#cityTip_4').css({
				left: $(mapObj_2[ 'jiangsu' ].node).offset().left - 78 ,
				top: $(mapObj_2[ 'jiangsu' ].node).offset().top  - 102 

			}).show();
		 
		 $('#cityTip_5').css({
				left: $(mapObj_2[ 'shandong' ].node).offset().left - 85 ,
				top: $(mapObj_2[ 'shandong' ].node).offset().top  - 127 

			}).show();
	
		$('#cityTip_6').css({
				left: $(mapObj_2[ 'liaoning' ].node).offset().left - 77 ,
				top: $(mapObj_2[ 'liaoning' ].node).offset().top - 80 

			}).show();
		
		$('#cityTip_7').css({
				left: $(mapObj_2[ 'tianjin' ].node).offset().left - 115 ,
				top: $(mapObj_2[ 'tianjin' ].node).offset().top  - 135 

			}).show();
		
		$('#cityTip_8').css({
				left: $(mapObj_2[ 'hubei' ].node).offset().left - 37 ,
				top: $(mapObj_2[ 'hubei' ].node).offset().top  - 110 

			}).show();
		
		$('#cityTip_9').css({
				left: $(mapObj_2[ 'sichuan' ].node).offset().left -27,
				top: $(mapObj_2[ 'sichuan' ].node).offset().top  - 90 

			}).show();

		$('#cityTip_10').css({
				left: $(mapObj_2[ 'xinjiang' ].node).offset().left +95,
				top: $(mapObj_2[ 'xinjiang' ].node).offset().top  -60 

			}).show();
		
		$('#cityTip_11').css({
				left: $(mapObj_2[ 'xizang' ].node).offset().left +85,
				top: $(mapObj_2[ 'xizang' ].node).offset().top  -40 

			}).show();
		
		$('#cityTip_12').css({
				left: $(mapObj_2[ 'qinghai' ].node).offset().left +80,
				top: $(mapObj_2[ 'qinghai' ].node).offset().top  -100 

			}).show();
		
		$('#cityTip_13').css({
				left: $(mapObj_2[ 'gansu' ].node).offset().left +45,
				top: $(mapObj_2[ 'gansu' ].node).offset().top  -20 

			}).show();
		
		$('#cityTip_14').css({
				left: $(mapObj_2[ 'yunnan' ].node).offset().left -30,
				top: $(mapObj_2[ 'yunnan' ].node).offset().top  -70 

			}).show();
		
		$('#cityTip_15').css({
				left: $(mapObj_2[ 'guangxi' ].node).offset().left -40,
				top: $(mapObj_2[ 'guangxi' ].node).offset().top  -90 

			}).show();
		$('#cityTip_16').css({
				left: $(mapObj_2[ 'guizhou' ].node).offset().left -50,
				top: $(mapObj_2[ 'guizhou' ].node).offset().top  -110 

			}).show();
		$('#cityTip_17').css({
				left: $(mapObj_2[ 'chongqing' ].node).offset().left -90,
				top: $(mapObj_2[ 'chongqing' ].node).offset().top  -110 

			}).show();
		$('#cityTip_18').css({
				left: $(mapObj_2[ 'shanxi' ].node).offset().left -80,
				top: $(mapObj_2[ 'shanxi' ].node).offset().top  -100 

			}).show();
		$('#cityTip_19').css({
				left: $(mapObj_2[ 'neimongol' ].node).offset().left +85,
				top: $(mapObj_2[ 'neimongol' ].node).offset().top  +88 

			}).show();
		$('#cityTip_20').css({
				left: $(mapObj_2[ 'shaanxi' ].node).offset().left -60,
				top: $(mapObj_2[ 'shaanxi' ].node).offset().top  -55 

			}).show();
		$('#cityTip_21').css({
				left: $(mapObj_2[ 'ningxia' ].node).offset().left -79,
				top: $(mapObj_2[ 'ningxia' ].node).offset().top  -130 

			}).show();
		$('#cityTip_22').css({
				left: $(mapObj_2[ 'henan' ].node).offset().left -55,
				top: $(mapObj_2[ 'henan' ].node).offset().top  -130 

			}).show();
		$('#cityTip_23').css({
				left: $(mapObj_2[ 'hunan' ].node).offset().left -45,
				top: $(mapObj_2[ 'hunan' ].node).offset().top  -124 

			}).show();
		$('#cityTip_24').css({
				left: $(mapObj_2[ 'jiangxi' ].node).offset().left -70,
				top: $(mapObj_2[ 'jiangxi' ].node).offset().top  -130

			}).show();
		$('#cityTip_25').css({
				left: $(mapObj_2[ 'fujian' ].node).offset().left -50,
				top: $(mapObj_2[ 'fujian' ].node).offset().top  -120 

			}).show();
		$('#cityTip_26').css({
				left: $(mapObj_2[ 'zhejiang' ].node).offset().left -80,
				top: $(mapObj_2[ 'zhejiang' ].node).offset().top  -135 

			}).show();
		$('#cityTip_27').css({
				left: $(mapObj_2[ 'anhui' ].node).offset().left -70,
				top: $(mapObj_2[ 'anhui' ].node).offset().top  -110 

			}).show();
		$('#cityTip_28').css({
				left: $(mapObj_2[ 'hebei' ].node).offset().left -90,
				top: $(mapObj_2[ 'hebei' ].node).offset().top  -70 

			}).show();
		$('#cityTip_29').css({
				left: $(mapObj_2[ 'jilin' ].node).offset().left -55,
				top: $(mapObj_2[ 'jilin' ].node).offset().top  -120 

			}).show();
		$('#cityTip_30').css({
				left: $(mapObj_2[ 'heilongjiang' ].node).offset().left -20,
				top: $(mapObj_2[ 'heilongjiang' ].node).offset().top  -30 

			}).show();
		$('#cityTip_31').css({
				left: $(mapObj_2[ 'hainan' ].node).offset().left -75,
				top: $(mapObj_2[ 'hainan' ].node).offset().top  -150 

			}).show();/**/
	// $.ajax({
	// 	url: projectName+'/idea123Action.do?method=getIdea123MapData&reportName='+reportName,
	// 	data: data,
	// 	dataType: 'json',
	// 	success: function(data){

	var data = {"jiangsu":{"value":"30.05%","index":"1","stateInitColor":"0"},"henan":{"value":"19.77%","index":"2","stateInitColor":"0"},"anhui":{"value":"10.85%","index":"3","stateInitColor":"0"},"zhejiang":{"value":"10.02%","index":"4","stateInitColor":"0"},"liaoning":{"value":"8.46%","index":"5","stateInitColor":"0"},"beijing":{"value":"4.04%","index":"6","stateInitColor":"1"},"hubei":{"value":"3.66%","index":"7","stateInitColor":"1"},"jilin":{"value":"2.56%","index":"8","stateInitColor":"1"},"shanghai":{"value":"2.47%","index":"9","stateInitColor":"1"},"guangxi":{"value":"2.3%","index":"10","stateInitColor":"1"},"sichuan":{"value":"1.48%","index":"11","stateInitColor":"2"},"guizhou":{"value":"0.99%","index":"12","stateInitColor":"2"},"hunan":{"value":"0.78%","index":"13","stateInitColor":"2"},"shandong":{"value":"0.7%","index":"14","stateInitColor":"2"},"guangdong":{"value":"0.44%","index":"15","stateInitColor":"2"},"jiangxi":{"value":"0.34%","index":"16","stateInitColor":"3"},"fujian":{"value":"0.27%","index":"17","stateInitColor":"3"},"yunnan":{"value":"0.23%","index":"18","stateInitColor":"3"},"hainan":{"value":"0.21%","index":"19","stateInitColor":"3"},"shanxi":{"value":"0.11%","index":"20","stateInitColor":"3"},"hebei":{"value":"0.11%","index":"21","stateInitColor":"4"},"neimongol":{"value":"0.04%","index":"22","stateInitColor":"4"},"tianjin":{"value":"0.04%","index":"23","stateInitColor":"4"},"gansu":{"value":"0.04%","index":"24","stateInitColor":"4"},"shaanxi":{"value":"0.02%","index":"25","stateInitColor":"4"},"macau":{"value":"0.0%","index":"26","stateInitColor":"7"},"hongkong":{"value":"0.0%","index":"27","stateInitColor":"7"},"taiwan":{"value":"0.0%","index":"28","stateInitColor":"7"},"qinghai":{"value":"0.0%","index":"29","stateInitColor":"7"},"xizang":{"value":"0.0%","index":"30","stateInitColor":"7"},"ningxia":{"value":"0.0%","index":"31","stateInitColor":"7"},"xinjiang":{"value":"0.0%","index":"32","stateInitColor":"7"},"heilongjiang":{"value":"0.0%","index":"33","stateInitColor":"7"},"chongqing":{"value":"0.0%","index":"34","stateInitColor":"7"}};
			var i = 1;
			for(k in data){
				if(i <= 12){
					var _cls = i < 4 ? 'active' : ''; 
					$('#MapControl .list1').append('<li name="'+k+'"><div class="mapInfo"><i class="'+_cls+'">'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else if(i <= 24){
					$('#MapControl .list2').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}else{
					$('#MapControl .list3').append('<li name="'+k+'"><div class="mapInfo"><i>'+(i++)+'</i><span>'+chinaMapConfig.names[k]+'</span><b>'+data[k].value+'</b></div></li>')
				}
			}

			var mapObj_1 = {};
			var stateColorList = ['003399', '0058B0', '0071E1', '1C8DFF', '51A8FF', '82C0FF', 'AAD5ee', 'AAD5FF'];
			
			$('#RegionMap').SVGMap({
				external: mapObj_1,
				mapName: 'china',
				mapWidth: 350,
				mapHeight: 350,
				stateData: data,
				// stateTipWidth: 118,
				// stateTipHeight: 47,
				// stateTipX: 2,
				// stateTipY: 0,
				stateTipHtml: function (mapData, obj) {
					var _value = mapData[obj.id].value;
					var _idx = mapData[obj.id].index;
					var active = '';
					_idx < 4 ? active = 'active' : active = '';
					var tipStr = '<div class="mapInfo"><i class="' + active + '">' + _idx + '</i><span>' + obj.name + '</span><b>' + _value + '</b></div>';
					return tipStr;
				}
			});
			$('#MapControl li').hover(function () {
				var thisName = $(this).attr('name');
				
				var thisHtml = $(this).html();
				$('#MapControl li').removeClass('select');
				$(this).addClass('select');
				$(document.body).append('<div id="StateTip"></div');
				$('#StateTip').css({
					left: $(mapObj_1[thisName].node).offset().left - 50,
					top: $(mapObj_1[thisName].node).offset().top - 40
				}).html(thisHtml).show();
				mapObj_1[thisName].attr({
					fill: '#E99A4D'
				});
			}, function () {
				var thisName = $(this).attr('name');

				$('#StateTip').remove();
				$('#MapControl li').removeClass('select');
				mapObj_1[$(this).attr('name')].attr({
					fill: "#" + stateColorList[data[$(this).attr('name')].stateInitColor]
				});
			});
			
			$('#MapColor').show();
	// 	}
	// });
});
</script>
</body>
</html>